<style itemscope>
    .layui-form-label.required:before {
        /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .addProductionPlanForm-title .title,
    .examineProductionPlanForm-title .title {
        display: inline-block;
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 19px;
        position: relative;
        padding: 6px 0 19px 0;
    }

    .addProductionPlanForm-title .title:after,
    .examineProductionPlanForm-title .title:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% + 6px);
        height: 3px;
        background: #0A8B0A;
    }

    .open-form .layui-input-block {
        margin-left: 115px;
    }
</style>
<script type="text/html" id="qualityItemTableBar">
    <!-- {{# if(d.status!=="1"){  }} -->
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detection">检测详情</a>
    <!-- {{#} }} -->
</script>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="purQualityTaskForm" class="layui-form open-form">
    <div class="open-model">
        <div class="open-auto">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">来源：</label>
                    <div class="layui-input-block">
                        <input disabled name="sourceTypeName" placeholder="来源" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">采购单：</label>
                    <div class="layui-input-block">
                        <input disabled name="orderCode" placeholder="" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">质检物料：</label>
                    <div class="layui-input-block">
                        <input disabled name="skuName" placeholder="质检物料" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">质检类型：</label>
                    <div class="layui-input-block">
                        <input disabled name="qcQualityTypeName" placeholder="质检类型" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">质检分类：</label>
                    <div class="layui-input-block">
                        <input disabled name="qualityTestingCategoryName" placeholder="质检分类" type="text"
                               class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">送检类型：</label>
                    <div class="layui-input-block">
                        <input disabled name="qualityTestingTypeName" placeholder="送检类型" type="text"
                               class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">取样数量：</label>
                    <div class="layui-input-block">
                        <input disabled name="submissionQuantity" placeholder="取样数量" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">载具编码：</label>
                    <div class="layui-input-block">
                        <input disabled name="carrierCode" placeholder="载具编码" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">取样备注：</label>
                    <div class="layui-input-block">
                        <input disabled name="remark" placeholder="取样备注" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label w-auto">状态：</label>
                    <div class="layui-input-block">
                        <input disabled name="statusName" placeholder="状态" type="text" class="layui-input"
                               autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label w-auto">附件：</label>
                    <div class="layui-input-block">
                        <div id="attachmentsDiv" class="attachments">
                            <img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this">任务时间线</li>
                        <li lay-id="BOMGUIHUA">样品检测结果</li>
                    </ul>
                    <div class="layui-tab-content" style="padding-top: 5px">
                        <div class="layui-tab-item layui-show" style="padding-top: 10px;">
                            <div class="layui-timeline">
                                <div class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">创建任务<span id="createTaskTime"></span></h3>
                                        <p>
                                            <label class="layui-form-label w-auto">作业人：</label>
                                        <div class="layui-input-block">
                                            <input id="createName" style="border: none" readonly="readonly"
                                                   name="createName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属岗位：</label>
                                        <div class="layui-input-block">
                                            <input id="createPostName" style="border: none" readonly="readonly"
                                                   name="createPostName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属部门：</label>
                                        <div class="layui-input-block">
                                            <input id="createDepName" style="border: none" readonly="readonly"
                                                   name="createDepName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">认领任务<span id="getTaskTime"></span></h3>
                                        <p>
                                            <label class="layui-form-label w-auto">认领人：</label>
                                        <div class="layui-input-block">
                                            <input id="getName" style="border: none" readonly="readonly" name="getName"
                                                   type="text" class="layui-input" autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属岗位：</label>
                                        <div class="layui-input-block">
                                            <input id="getPostName" style="border: none" readonly="readonly"
                                                   name="getPostName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属部门：</label>
                                        <div class="layui-input-block">
                                            <input id="getDepName" style="border: none" readonly="readonly"
                                                   name="getDepName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">检出结果<span id="checkTaskTime"></span>
                                        </h3>
                                        <p>
                                            <label class="layui-form-label w-auto">检出人：</label>
                                        <div class="layui-input-block">
                                            <input id="checkName" style="border: none" readonly="readonly"
                                                   name="checkName" type="text" class="layui-input" autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属岗位：</label>
                                        <div class="layui-input-block">
                                            <input id="checkPostName" style="border: none" readonly="readonly"
                                                   name="checkPostName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                        <p>
                                            <label class="layui-form-label w-auto">所属部门：</label>
                                        <div class="layui-input-block">
                                            <input id="checkDepName" style="border: none" readonly="readonly"
                                                   name="checkDepName" type="text" class="layui-input"
                                                   autocomplete="off"/>
                                        </div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="bom_info">
                            <div class="layui-form-item layui-row" id="yiwuyijian">
                                <table class="layui-table" id="addQualityDetailRecordTableList"
                                       lay-filter="addQualityDetailRecordTableList" style="margin: 1px 0 10px;"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right pd-20">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </div>
</form>
<!--选择开工单-->
<script type="text/html" id="selectTheWorkProcessTemplate">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 头部操作栏 -->
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">开工单编号：</label>
                            <div class="layui-input-inline mr0" style="width: 240px;">
                                <input name="code" class="layui-input" type="text" placeholder="开工单编号"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn" lay-filter="selectTheWorkProcessFormSubSearchLog"
                                    lay-submit style="padding: 0 24px;">
                                搜索
                            </button>
                            <button id="selectTheWorkProcessClose" class="layui-btn icon-btn">确认选择</button>
                        </div>
                    </div>
                </div>
                <!-- 表格 -->
                <table class="layui-table" id="selectTheWorkProcessTable"
                       lay-filter="selectTheWorkProcessTable"></table>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], async function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var upload = layui.upload;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;

        let addQualityDetailRecordList = [];
        //选择开工单
        let templateData = admin.getTempData("workOrderQuaTaskInfoData");
        //初始化表格
        let addQualityDetailRecordTable = table.render({
            elem: '#addQualityDetailRecordTableList',
            data: addQualityDetailRecordList,
            id: 'addQualityDetailRecordTableList',
            limit: 9999,
            cols: [[
                {field: 'code', edit: 'text', title: '样品编码', align: 'center'}
                , {field: 'statusName', title: '状态', align: 'center'}
                , {field: 'qualityTestingResultName', title: '检测结果', align: 'center'}
                , {field: 'modifierName', title: '检测人', align: 'center'}
                , {field: 'updateTime', title: '检测时间', align: 'center'}
                , {field: 'remark', title: '质检备注', edit: 'text', align: 'center'}
                // , {align: 'center', toolbar: '#qualityItemTableBar', title: '操作'}
            ]]
        });
        //详情
        if (templateData) {
            form.val('purQualityTaskForm', templateData);

            let imagUrl = templateData.paperSlipPic;

            if (imagUrl && imagUrl.indexOf(".pdf") !== -1) {
                PDFObject.embed(imagUrl, "#attachmentsDiv");
            } else {
                if (imagUrl) {
                    let attachmentHtml = "";
                    imagUrl.split(",").forEach((attachmentUrl, index) => {
                        attachmentHtml += '<div><div><img style="max-width: 300px;max-height: 200px" src="' + attachmentUrl + '"></div></div>';
                    });
                    $('#attachmentsDiv').html(attachmentHtml);
                }
            }
            //查询任务详情
            let taskRes = await admin.reqPro("enterprise/purchase/admin/purQualityTask/detail/" + templateData.id);
            if (taskRes.code == 200) {
                let taskInfo = taskRes.data;
                addQualityDetailRecordList = taskInfo.taskDetailList;
                addQualityDetailRecordTable.reload({data: addQualityDetailRecordList});

                //初始化时间节点
                $("#createTaskTime").html(taskInfo.infoVo.createTime);
                $("#getTaskTime").html(taskInfo.infoVo.getTime);
                $("#checkTaskTime").html(taskInfo.infoVo.checkTime);

                $("#createName").val(taskInfo.infoVo.createName);
                $("#getName").val(taskInfo.infoVo.getName);
                $("#checkName").val(taskInfo.infoVo.checkName);

                $("#createPostName").val(taskInfo.infoVo.createPostName);
                $("#getPostName").val(taskInfo.infoVo.getPostName);
                $("#checkPostName").val(taskInfo.infoVo.checkPostName);

                $("#getDepName").val(taskInfo.infoVo.getDepName);
                $("#createDepName").val(taskInfo.infoVo.createDepName);
                $("#checkDepName").val(taskInfo.infoVo.checkDepName);
            }
        }

        table.on('tool(addQualityDetailRecordTableList)', function (obj) {
            if (obj.event === 'detection') {
                let data = {};
                data.taskId = templateData.id;
                data.recordDetailId = obj.data.id;
                //判定结果
                data.qualityTestingResult = obj.data.qualityTestingResult;
                //检测备注
                data.JCRemark = obj.data.remark;
                //送检工位
                data.JCInspectDeviceCode = obj.data.inspectDeviceCode;
                data.paperSlipPic = obj.data.paperSlipPic;
                data.processId = templateData.processId;
                console.log('obj', obj);

                admin.putTempData("taskQualityDetailValueData", data)
                var detectionIndex = admin.formOpen({
                    type: 2,
                    area: ['80%', '92%'],
                    style: 'font-size: 20px;',
                    title: '录入/修改质检参数',
                    path: 'components/res/quality/taskQualityRecordDetailValueForm.html',
                    finish: function () {
                        table.reload(addQualityDetailRecordTable, {});
                    }
                });
            }
        });
    });
</script>